<template>
  <a-form
      @submit="(e) => ProcessTabsContext.handlerSubmit(e, processProcessingForm)"
      :labelCol="{span: 3}"
      :wrapperCol="{span: 21}"
      labelAlign="left"
      class="process-form"
      :form="processProcessingForm"
  >
    <a-form-item label='流程说明'>
      <span>请确保指标明细或者明细调整区至少含有一条调整信息.</span>
    </a-form-item>

    <template v-if="ProcessTabsContext.flag && Number(ProcessTabsContext.flag) !== 1">
      <a-form-item label='操作'>
        <a-radio-group
            v-decorator="['branchAboutArgeen', {rules: [{ required: true, message: '请选择条件!' }]}]"
            class="process-tabs-body-processing-radio process-tabs-body-processing-radio-branchAbout"
            :options="ProcessTabsContext.branchAboutArgeen"
            @change="(e) => ProcessTabsContext.branchActionChange(e)"
        />
      </a-form-item>
    </template>

    <a-form-item label='分支条件'>
      <div class='process-tabs-body-processing-radio'>
        <div class="processing-title">
          人工决策
        </div>
        <div class='processing-radio-body'>
          <a-radio-group v-decorator="['branchConditionRadio', {rules: [{ required: true, message: '请选择分支条件!' }]}]"
                         @change="(e) => ProcessTabsContext.branchRadioChange(e)">
            <a-row v-if="ProcessTabsContext.branchConditionRadio" type="flex">
              <a-col v-for="radio in Object.keys(ProcessTabsContext.branchConditionRadio)" :key="radio">
                <a-radio :value="radio">
                  {{ ProcessTabsContext.branchConditionRadio[radio] }}
                </a-radio>
              </a-col>
            </a-row>
          </a-radio-group>
        </div>
      </div>
    </a-form-item>

    <a-form-item label='即将流向'>
      <!-- 结束节点不验证 -->
      <template
          v-if="ProcessTabsContext.branchActionAboutToFlowRadio && ProcessTabsContext.branchActionAboutToFlowRadio.length > 0">
        <a-checkbox-group
            v-decorator="['nodeUsers', {rules: [{ required: true, message: '请选择即将流向!' }]}]"
            class='process-tabs-body-processing-radio'
            :options="ProcessTabsContext.branchActionAboutToFlowRadio"
            @change="(e) => {ProcessTabsContext.nodeUsers = e}"/>
      </template>
      <template v-else>
        <a-checkbox-group
            class='process-tabs-body-processing-radio'
            :options="ProcessTabsContext.branchActionAboutToFlowRadio"
            @change="(e) => {ProcessTabsContext.nodeUsers = e}"/>
      </template>
    </a-form-item>
    <!-- <a-button @click="btnClick">按钮</a-button> -->

    <template v-if="formGuid">
      <a-form-item label="审批意见">
        <a-textarea v-decorator="['opinion', {rules: [{ required: true, message: '请填写审批意见!' }]}]"
                    placeholder="请输入审批意见"/>
      </a-form-item>
    </template>
    <div class="process-form-upfile ant-form-item">
      <a-form-model-item label="附件" class="a-form-file">
        <a-upload :fileList="ProcessTabsContext.uploadFileList" :beforeUpload="beforeUpload"
                  :remove="onRemove">
          <a-button class="process-upload">
            上传附件
          </a-button>
        </a-upload>
        <span>
            请选择要上传的附件
        </span>
      </a-form-model-item>
    </div>
    <a-form-item label='是否提交'>
      <a-button htmlType='submit' class='process-submit'>
        提交
      </a-button>
    </a-form-item>

  </a-form>
</template>

<script>
import {getParams} from "@/utils";
import {message, Modal} from 'ant-design-vue';
import {removeFile} from '@/api/handle/handle';

const {formGuid, Novice} = getParams();
export default {
  name: "ProcessProcessing",
  inject: {
    connectStore: {
      default: () => ({})
    }
  },
  props: {
    processFileTableData: {
      type: Array,
      default: () => ([]),
    }
  },
  watch: {
    processFileTableData: {
      deep: true,
      handler: function (newValue) {
        const copyList = JSON.parse(JSON.stringify(newValue));
        const flag = copyList && copyList !== '暂无数据';
        flag && (copyList.forEach((item) => {
          item.name = item.originName;
          item.uid = item.id;
        }))
        if (flag && !Novice) {
          const userNow = localStorage.getItem("userId") * 1;
          this.ProcessTabsContext.uploadFileList = copyList.filter((item) => {
            return item.userId === userNow;
          });
        }
      }
    },
    // 吴兴办理默认全选
    'ProcessTabsContext.branchActionAboutToFlowRadio': {
      deep: true,
      handler: function (arr) {
        if (document.title === '吴兴财政服务平台' && arr.length) {
          const nodeUsers = []
          arr.forEach(item => {
            nodeUsers.push(item.id)
          })
          this.$nextTick(() => {
            this.processProcessingForm.setFieldsValue({
              nodeUsers
            })
          })
        }
      }
    }
  },
  data() {
    return {
      formGuid,
      processProcessingForm: this.$form.createForm(this, {name: 'processProcessingForm'}),
      fileListEarly: []
    }
  },
  methods: {
    beforeUpload(file) {
      if (file.size === 0) {
        message.error('文件内容不能为空');
      } else {
        // this.ProcessTabsContext.uploadFileList = [file];
        this.ProcessTabsContext.uploadFileList = this.ProcessTabsContext.uploadFileList.concat(file);
      }
      return false;
    },
    onRemove(file) {
      if (file.lastModified) {
        const index = this.ProcessTabsContext.uploadFileList.indexOf(file);
        this.ProcessTabsContext.uploadFileList.splice(index, 1);
      } else {
        const {id} = file;
        const {confirm} = Modal;
        confirm({
          title: '警告',
          content: '确认删除该文件?',
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            removeFile({id}).then((res) => {
              if (res.success) {
                const index = this.ProcessTabsContext.uploadFileList.indexOf(file);
                this.ProcessTabsContext.uploadFileList.splice(index, 1);
                message.success(res.message);
              }
            });
          }
        })
      }
    }
  },
  computed: {
    bpmActionAddOfUpData() {
      return this.connectStore.value.bpmActionAddOfUpData;
    },
    ProcessTabsContext() {
      return this.connectStore.value.ProcessTabsContext;
    },
  }
}
</script>

<style lang="less" scoped>
.process-form-upfile {
  /deep/ * {
    .ant-form-item-children {
      width: 100%;
    }

    .ant-upload-list-item-card-actions {
      opacity: 1;
      .anticon-delete{
        color: red;
      }
    }
  }

}

.process-tabs-body-processing-radio-branchAbout {
  /deep/ .ant-radio-wrapper:nth-child(1) {
    color: #80e092;
  }

  /deep/ .ant-radio-wrapper:nth-child(2) {
    color: #edc577;
  }

  /deep/ .ant-radio-wrapper:nth-child(3) {
    color: #eb7575;
  }
}
</style>
